﻿@model WeddingEventManagementApp.Models.Event_VM

@{
    ViewBag.Title = Model.Title;
}

<div class="twelve columns">
    <h3 class="blue-head">Edit Event</h3>
    @using (Html.BeginForm())
    {
        <div>
            @Html.ValidationSummary(true, "Errors Have Occured", new {@class="no-bullet"})
        </div>
        
        <div class="twelve columns">
            
            <!-- Client -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">Client:</label>
                </div>

                <div class="six columns">
                    <div class="row">
                        <div class="twelve columns">
                            @Html.TextBoxFor(model => model.ClientName, new { disabled="true" })
                        </div>
                    </div>
                </div>

                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.ClientID)
                </div>
            </div>

            <!-- Title -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">Title:</label>
                </div>

                <div class="six columns">
                    <div class="row">
                        <div class="twelve columns">
                            @Html.EditorFor(model => model.Title)
                        </div>
                    </div>
                </div>

                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.Title)
                </div>
            </div>

            <!-- Event Type Row -->
            <div class="row">
                <div class ="two columns">
                    <label class="right inline">Event Type:</label>
                </div>

                <div class="six columns">
                    <div class="row">
                        <div class="twelve columns">
                            @Html.TextBoxFor(model => model.EventType, new { @class="ddl-type"})
                        </div>
                    </div>
                </div>

                <div class="four columns">
                    <!-- Event type validation message placeholder -->
                </div>

            </div>

            <!-- Package Type Row -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">Package Type:</label>
                </div>

                <div class="six columns">
                    <div class="row">
                        <div class="twelve columns">
                            @Html.DropDownListFor(model => model.PackageType, from PackageType type in Enum.GetValues(typeof(PackageType)) select new SelectListItem() {Text = type.ToString(), Value = ((int)type).ToString() }, new { @class="ddl"} )
                        </div>
                    </div>
                </div>

                <div class="four columns">
                    <!-- Package Type Validation Placeholder -->
                </div>

            </div>

            <!-- Start Date -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">Start Date: </label>
                </div>
                <div class="six columns">
                    <div class="row">
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker" })
                        </div>
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.StartTime, new {@class = "timepicker"})
                        </div>
                    </div>
                </div>
                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.StartDate)
                    <!-- Placeholder for time val message -->
                </div>
            </div>

            <!-- End Date -->
            <div class="row">
                <div class="two columns">
                    <label class="right inline">End Date:</label>
                </div>
                <div class="six columns">
                    <div class="row">
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
                        </div>
                        <div class="six columns">
                            @Html.TextBoxFor(model => model.EndTime, new {@class = "timepicker"})
                        </div>
                    </div>
                </div>
                <div class="four columns">
                    @Html.ValidationMessageFor(model => model.EndDate)
                    <!-- Placeholder for time val message -->
                </div>       
            </div>
            
            @Html.HiddenFor(model => model.EventID)

            <div class="row">
                <div class="ten columns offset-by-four">
                    <input type="submit" value="Save Event" class="button text-center" />
                </div>
            </div>

        </div>
    }

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    
    <script>
        $(document).ready(function () {

            $(".ddl-type").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "ID",
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "/Event/GetAllEventTypesJson" // url to server method which returns data
                    }
                })
            });


        //Date and time pickers
        $(".timepicker").kendoTimePicker({
            animation: {
                close: {
                    effects: "fadeOut",
                    duration: 300,
                    hide: true,
                    show: false
                }
            }
        });
        $(".datepicker").kendoDatePicker({
            animation: {
                open: {
                    effects: "fadeIn",
                    duration: 300,
                    show: true
                }
            }
        });

    });
    </script>
}